<template>
    <div>
        <div class="operarea">
            <div class="seach">
                <el-date-picker v-model="date" type="date" :placeholder="$t('pubdate')" size="mini"></el-date-picker>
                <el-select v-model="state" :placeholder="$t('status')" clearable size="mini">
                    <el-option :label="$t('bigrobe')" value="bigrobe"></el-option>
                    <el-option :label="$t('kaften')" value="kaften"></el-option>
                </el-select>
                <el-input v-model="acc" :placeholder="$t('account')" clearable size="mini"></el-input>
                <el-input v-model="acc" :placeholder="$t('title')" clearable size="mini"></el-input>
                <el-input v-model="acc" :placeholder="$t('label')" clearable size="mini"></el-input>
                <el-button size="mini" icon="el-icon-search" @click="seachData"></el-button>
            </div>
            <div class="btnList">
                <el-button size="mini" @click="showDel">{{$t('delete')}}</el-button>
                <el-button size="mini" @click="showAudit">{{$t('audit')}}</el-button>
                <el-button size="mini" @click="mountedata">{{$t('establish')}}</el-button>
            </div>
        </div>
        <el-card class="cardBox">
            <el-table style="width: 100%" ref="contentTable" stripe v-adaptive="{bottomOffset: 85}" height="100" :data="commentTab" row-key="taskId" @selection-change="handleSelectionChange">
                <el-table-column type="selection" :reserve-selection="true">
                </el-table-column>
                <el-table-column prop="type" :label="$t('title')">
                </el-table-column>
                <el-table-column prop="style" :label="$t('label')">
                </el-table-column>
                <el-table-column prop="stylenum" :label="$t('account')">
                </el-table-column>
                <el-table-column prop="title" :label="$t('pubdate')">
                </el-table-column>
                <el-table-column prop="new" :label="$t('status')">
                </el-table-column>
                <el-table-column prop="address" :width="detailsWidth" :label="$t('details')" fixed="right">
                    <template v-slot="scope">
                        <el-button @click.stop="showRecommend(scope.row.id)" size="mini">{{$t('banned')}}</el-button>
                        <el-button size="mini" @click.stop="getDetails(scope.row.id)">{{$t('examine')}}</el-button>
                        <el-button size="mini" @click.stop="getDetails(scope.row.id)">{{$t('audit')}}</el-button>
                        <el-button size="mini" @click.stop="getDetails(scope.row.id)">{{$t('delete')}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                small
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :pager-count="11"
                :current-page.sync="seachForm.pageNo"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="seachForm.pageSize"
                layout="sizes, prev, pager, next"
                :total="total">
            </el-pagination>
        </el-card>
        <!-- 删除 -->
        <el-dialog :title="$t('hint')" :visible.sync="delDialogVisible" width="420px" class="smallDlog" :close-on-click-modal="false">
            <span>{{$t('confirmdel')}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delDialogVisible = false">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="delData">{{$t('confirm')}}</el-button>
            </span>
        </el-dialog>
        <!-- 审核 -->
        <el-dialog :title="$t('hint')" :visible.sync="auditDialogVisible" width="420px" class="smallDlog" :close-on-click-modal="false" @close="auditDlogClose(auditForm)">
            <el-form :model="auditForm" :rules="auditRules" :ref="auditForm" class="motuoForm">
                <el-form-item :label="$t('activityname')" label-width="70px" prop="remark">
                    <el-input type="textarea" v-model="auditForm.remark" :placeholder="$t('auditnotes')" autosize></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="auditDialogVisible = false">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="auditData(auditForm)">{{$t('confirm')}}</el-button>
            </span>
        </el-dialog>
        <!-- 禁言 -->
        <el-dialog :title="$t('hint')" :visible.sync="banDialogVisible" width="420px" class="smallDlog" :close-on-click-modal="false">
            <span>{{$t('whetheuseisprofrmspk')}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="banDialogVisible = false">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="banData">{{$t('confirm')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Cookies from 'js-cookie'
export default {
    data () {
        return {
            total: 0,
            seachForm: {
                pageNo: 1,
                pageSize: 10
            },
            date: '',
            state: '',
            acc: '',
            commentTab: [{
                type: 'asd'
            }],
            selTabData: [],
            delDialogVisible: false,
            auditDialogVisible: false,
            banDialogVisible: false,
            auditForm: {
                remark: ''
            },
            auditRules: {
                remark: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur' }
                ]
            },
            detailsWidth: 262
        }
    },
    methods: {
        getData () {},
        seachData () {},
        handleSizeChange (newSize) {
            this.seachForm.pageSize = newSize
            this.seachData()
        },
        handleCurrentChange (newNum) {
            this.seachForm.pageNo = newNum
            this.seachData()
        },
        // 删除
        showDel () {
            if (this.selTabData.length === 0) {
                this.$message.error(this.$t('plsselthecon'))
                return
            }
            this.delDialogVisible = true
        },
        delData () {
            this.$message({
                type: 'success',
                message: this.$t('delsuc')
            })
            this.$refs.contentTable.clearSelection()
            this.delDialogVisible = false
        },
        // 审核
        showAudit () {
            if (this.selTabData.length === 0) {
                this.$message.error(this.$t('plsselthecon'))
                return
            }
            this.auditDialogVisible = true
        },
        auditData (form) {
            this.$refs[form].validate(valid => {
                if (!valid) return
                this.$message({
                    type: 'success',
                    message: this.$t('tocomtherev')
                })
                this.$refs.contentTable.clearSelection()
                this.auditDialogVisible = false
            })
        },
        auditDlogClose (form) {
            this.$refs[form].resetFields()
        },
        // 创建
        mountedata () {},
        // 表格选中处理
        handleSelectionChange (select) {
            this.selTabData = select
        },
        // 禁言
        showRecommend () {
            this.banDialogVisible = true
        },
        banData () {
            this.$message({
                type: 'success',
                message: this.$t('bansuc')
            })
            this.banDialogVisible = false
        },
        getDetails () {}
    },
    created () {
        switch (Cookies.get('language')) {
            case 'zh-CN':
                this.detailsWidth = 262
                break;
            case 'en':
                this.detailsWidth = 350
        }
    }
}
</script>

<style lang="less" scoped>
@import './content.less';
</style>
